<template>
    <div class="main" >
        <Nav>
            <div slot="left" @click="goBack">&lt;</div>
            <div slot="center">专业题库</div>
            <div slot="right" >···</div>
        </Nav>

        <div class="progress-bar" :style="progressBarWidth">
        </div>
        <div class="tips">
            {{ page }}/{{ problemdata.length }}
            <!-- {{ answered }}/{{ answering }} -->
        </div>
        <div class="name">{{ page }}.{{problemdata[page-1].name}}</div>
        <Scroll class="content" :pullUpload="true" ref="answerscroll">
        <div id="answerlist">
            <answer-item v-for="(item,index) in problemdata[page-1].option" 
            :key="index"
            :style="notClickItem">
                <div slot="text" @click="showAnswer(index,problemdata[page-1].op5)">
                    {{select[index]}}.{{ item.title }}
                </div>
            </answer-item>
          
        </div>
        </Scroll>
         <div class="analysis" @click="gotoAnalysis">查看解析</div>
         <router-view :answer="problemdata[page-1].answer"></router-view>
         <div class="bottom">
             <div class="exit common" @click="handleExit" >退出答题</div>
             <div class="next common" @click="handleNext">下一题</div>
         </div>
     
    </div>
</template>

<script>
import {request} from '@/network/request.js';
import Nav from '@/components/common/Nav.vue';
import AnswerItem from './AnswerItem.vue';
import Scroll from '@/components/common/scroll/Scroll.vue';
import {debounce} from '@/components/common/common.js';
    export default {
        data() {
            return {
                problemdata: [{name:'',option:[]}],
                // page:1,
                scrollrefresh:null,

                select:['A','B','C','D','E','F','G'],
                // 设置不可点击标识符
                notclick:false,
                //当前题号
                page:1
            }
        },
        components: {
            Nav,
            AnswerItem,
            Scroll
        },
        created () {
            this.getProblemData();
        },
        mounted () {
            this.scrollrefresh = debounce(this.$refs.answerscroll.refresh,50);
        },
        computed: {
            notClickItem() {
                return  this.notclick?{ pointerEvents: 'none'}:{}
            },
            progressBarWidth(){
                return {width:String((this.page/this.problemdata.length)*100)+"%"}
            },

        },
        methods: {
            gotoAnalysis(){
                this.$router.push("/problems/answer/analysis")
            },
            showAnswer(index,answer){
                // console.log(answer);
                let answerIndex = null
                let answerList = document.querySelector("#answerlist")
                switch (answer) {
                    case 'A':
                        answerIndex = 0
                        break;
                    case 'B':
                        answerIndex = 1
                        break;
                    case 'C':
                        answerIndex = 2
                        break;
                    case 'D':
                        answerIndex = 3
                        break;
                    case 'E':
                        answerIndex = 4
                        break;
                    case 'F':
                        answerIndex = 5
                        break;
                    case 'G':
                        answerIndex = 6
                        break;
                }
                if(answerIndex === index){
                    let answertrue = answerList.children[index]
                    answertrue.style.backgroundColor = 'green';
                    answertrue.style.color = '#fff';
                    this.notclick = true;
                    this.$store.commit('addCount')
                    // 输出答对题目数量
                    // console.log(this.$store.state.count);
                }else{
                    let answerfalse = answerList.children[index]
                    answerfalse.style.backgroundColor = 'red';
                    answerfalse.style.color = '#fff';
                    this.notclick = true;
                    console.log(this.$store.state.count);
                }
            },
            goBack() {
                this.$router.push('/problems')
            },
            handleExit(){
                this.$router.push('/problems')
            },
            handleNext(){
                    if(this.page < this.problemdata.length){
                    let answerList = document.querySelector("#answerlist")
                    answerList.children.forEach(item=>{
                        item.style.backgroundColor = "#e3e4e9";
                        item.style.color = "#111737"
                    })
                    this.notclick = false;
                    this.page += 1;
                    this.scrollrefresh();
                }  else{
                    // 事件总线不生效
                    // this.$bus.$emit('questioncount',this.problemdata.length)

                    this.$store.commit('setQuestionCounts',{questioncount:this.problemdata.length})
                    this.$router.push("/problems/answer/result")
                }
            },
            async getProblemData(){
                try{
                    const res = await request({
                    url: 'api/question/questionbase',
                    data:{
                        id:8
                    }
                    })
                    this.problemdata = res.data.data;
                    // console.log(this.problemdata);
                    // 刷新scroll的高度
                    this.scrollrefresh();
                 }catch{
                     console.log("加载失败")
                    //  this.getProblemData()
                 }
            },
            
 
        },
    }
</script>

<style  scoped>
.main{
    height: calc(100vh - 64px);
    position: relative;
}
.progress-bar{
    margin-top: 64px;
    height: 4px;
    background-color: green;
    margin-bottom: 15px;
}
.tips{
    width: 60px;
    height: 24px;
    border: 1px solid #c5c9d5;
    border-radius: 12px;
    color: #c5c9d5;
    text-align: center;
    line-height: 24px;
    margin: 0 auto;
}
.name{
    margin:14px 25px  10px 22px;
    min-height: 40px;
    color: #121737;
}
.content{
    height: calc(100% - 340px);
    overflow: hidden;
}
.analysis{
    font-size: 14px;
    color: #c5c9d4;
    width: 61px;
    margin: 30px  auto  22px auto;
}
.bottom{
display: flex;
justify-content: space-evenly;
}

.common{
    width: 135px;
    height: 40px;
    font-size: 14px;
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
    /* flex: 1; */
    box-sizing: border-box;
}
.exit{
    border: 1px solid #262b49;
}
.next{
     background: linear-gradient(to right, #1fcbcf 50%,#0484c3 100%);
}
</style>